<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<title>类别</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
	<style>
	body{font-size:16px;}
	.wrap{min-height:100%;width:100%;background-color:rgb(247,247,247);display:-webkit-flex;justify-content:flex-end;}
	.wrap-left{width:30%;min-height:100%;border-right:1px solid rgb(216,216,216);box-sizing:border-box;left:0;top:0;}
	.wrap-left li{padding:25px 10px 25px 15px;position:relative;}
	.wrap-left-ul-li-arrow{position:absolute;top:25px;right:-1px;height:20px;width:11px;background:url(images/arrowtoleft.png) center/100% no-repeat;}
	.wrap-right{width:70%;min-height:100%;background-color:rgb(239,239,239);}
	.wrap-right-ul{display:none;box-sizing:border-box;}
	.wrap-right-li{height:85px;border-bottom:1px solid rgb(222,222,222);padding:10px;display:-webkit-box;}
	.wrap-right-ul-img{height:65px;width:65px;}
	.wrap-right-ul-word{height:65px;line-height:65px;width:100%;display:-webkit-box;-webkit-box-flex:1;margin: 0 0 0 15px;}
	</style>
</head>
<body>
	<div class="wrap after">
		<div class="wrap-left">
			<ul class="wrap-left-ul" id="wrap-left-ul">
			</ul>
		</div>
		<div class="wrap-right" id="wrap-right">
<!-- 			<ul class="wrap-right-ul after" id="wrap-right-ul">
				<li class="wrap-right-li">
					<img class="wrap-right-ul-img" src="../image/6 Plus.jpg" alt="">
					<span class="wrap-right-ul-word">荣耀</span>
				</li>
			</ul>
 -->		</div>
	</div>
<!-- 
//错误实例
{{for(var kk in it){}}
	{{if(it[key]['id']===it[kk]['pid'])}}
		<li class="wrap-right-li">
			<img class="wrap-right-ul-img" src="{{=it[kk]['img']['url']}}" alt="">
			<span class="wrap-right-ul-word">{{=it[kk]['name']}}</span>
		</li>
	{{}}}
{{}}}

//正确
{{for(var kk in it){}}
	{{if(it[key]['id']===it[kk]['pid']){}}
		<li class="wrap-right-li">
			<img class="wrap-right-ul-img" src="{{=it[kk]['img']['url']}}" alt="">
			<span class="wrap-right-ul-word">{{=it[kk]['name']}}</span>
		</li>
	{{}}}
{{}}}
 -->
 
 
<script type="text/x-dot-template" id="wrap-left-ul-template">
{{for(var key in it){}}
		<li class="wrap-left-ul-li" onclick="current_item({{=ii}});">{{=it[key]['name']}}<i class=""></i></li>
		{{ii+=1;}}
{{}}}
</script>

<script type="text/x-dot-template" id="wrap-right-template">
{{for(var key in it){
    
}}
	<ul class="wrap-right-ul after">
		{{for(var child in it[key]['childs']){
			var icon= 'http://comm.72gs.net/files/'+(it[key]['childs'][child]['icon']||0);
		}}
		
		<li class="wrap-right-li" onclick="productlist('{{=it[key]['_id']}}','{{=it[key]['childs'][child]['name']}}','{{=index}}')">
			<img class="wrap-right-ul-img lazy" src="{{=icon}}" data-original="{{=it[key]['name']}}">
			<span class="wrap-right-ul-word">{{=it[key]['childs'][child]['name']}}</span>
		</li>
		{{}}}
	</ul>
{{
	index++;
}}}
</script>
	

	
	
<!--	<li class="wrap-left-ul-li" onclick="current_item({{=ii}});">父类<i class=""></i></li>
	
	
	<ul class="wrap-right-ul after">
			
			<li class="wrap-right-li">
				<img class="wrap-right-ul-img lazy" src="../../image/noImage.png" data-original="{{=it[kk]['img']['url']}}">
				<span class="wrap-right-ul-word">子类名称</span>
			</li>
				
	</ul>
	-->
	
	</script>
	
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/jquery.lazyload.min.js"></script>
	
	
	<script>
	var ii=0;
	var index = 0;
	var previous_item_symbol=0;
	var current_item_symbol=0;
	var current_item = function(symbol){
	
		document.getElementsByClassName('wrap-left-ul-li')[previous_item_symbol].getElementsByTagName("i")[0].className="";
		document.getElementsByClassName('wrap-left-ul-li')[previous_item_symbol].style.color="rgb(0,0,0)";
		document.getElementsByClassName('wrap-right-ul')[previous_item_symbol].style.display="none";

		document.getElementsByClassName('wrap-left-ul-li')[symbol].getElementsByTagName("i")[0].className="wrap-left-ul-li-arrow";
		document.getElementsByClassName('wrap-left-ul-li')[symbol].style.color="rgb(176,0,0)";
		document.getElementsByClassName('wrap-right-ul')[symbol].style.display="block";
		previous_item_symbol=symbol;
	}
    
    var parents;
    
    
		apiready=function(){
		        do_ajax('/app/getcategory','get',{},function(ret,err){
       
				       if(ret){
				         
				         	parents=ret;
				           
				          // alert(JSON.stringify(ret));
				          	var wrap_left_ul_template = document.getElementById('wrap-left-ul-template').innerHTML;
							document.getElementById('wrap-left-ul').innerHTML = doT.template(wrap_left_ul_template)(ret);
							
							var wrap_right_template = document.getElementById('wrap-right-template').innerHTML;
							document.getElementById('wrap-right').innerHTML=doT.template(wrap_right_template)(ret);
							current_item(current_item_symbol);
							
//							alert(doT.template(wrap_left_ul_template)(ret));
//							
//							alert(doT.template(wrap_right_template)(ret));
							
							$("img.lazy").lazyload({
								effect:'slideDown'
							});
							api.hideProgress();
					    
				       }else{
				            api.alert({
					            msg:('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode)
					        });
					        api.hideProgress();
				       }
			   });
		}
		
		//商品列表
		function productlist(proid,name,parindex){
		
			openWin('productlist',{'category':name,'childList':parents[parindex].childs});
		};
		
	</script>
</body>
</html>